<template>
  <div>
    <h3>选中区域</h3>
    <ul class="range-scroll">
      <li v-for="(item, index) in rangeInfo.range" :key="index" v-bind="item">
        范围区间：{{ columnFilter(item.column[0])}}{{item.row[0] + 1 }}:{{ columnFilter(item.column[1])}}{{item.row[1] + 1 }}
      </li>
    </ul>
    <a-button type="primary" :style="{ marginTop: '15px' }" @click="saveRange" :disabled="!status">保 存</a-button>
    <a-button type="primary" :style="{ marginTop: '15px', marginLeft: '15px' }" @click="editRange" >{{status?'取 消':'修 改'}}</a-button>
  </div>
</template>

<script>
import { columnFilter, unColumnFilter } from '../export.js'

export default {
  name: 'RangeSys',
  props: {
    rangeInfo: {
      type: Object,
      default: false,
      required: false,
    },
    status: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      columnFilter,
      unColumnFilter,
    }
  },
  methods: {
    //保存区域配置
    saveRange() {
      this.$emit('save',null,(this.rangeInfo&&this.rangeInfo.range||[]),true)
    },
    editRange() {
      this.$emit('edit')
    },
  },
}
</script>
<style lang="less" scoped>
ul {
  list-style-type: none;
  padding: 0;
}
.range-scroll {
  max-height: 350px;
  overflow-y: auto;
  li {
    line-height: 26px;
  }
}
</style>